<template>
  <nav-bar class="detail-tab">
    <div slot="left">
      <img class="back" @click="backHandler" src="~assets/img/common/back.svg" alt="">
    </div>
    <div slot="center" class="center">
      <span v-for="(item, index) in titles" :class="currentIndex===index ? 'active' : '' " @click="itemClick(index)" :key="index" >{{item}}</span>
    </div>
  </nav-bar>
</template>

<script scoped>
  import NavBar from 'common/navbar/NavBar'
  export default {
    name: 'DetailNavBar',
    props: {
      titles: {
        type: Array,
        default() {
          return ['商品','参数','评论','推荐']
        }
      }
    },
    data() {
        return {
          currentIndex: 0
        }
    },
    components: {
      NavBar
    },
    methods: {
      backHandler() {
        this.$router.back()
      },
      itemClick(index) {
        this.currentIndex = index
        this.$emit('itemClick',index)
      }
    }
  }
</script>

<style lang='less' scoped>
  .detail-tab {
    background-color: #fff;
    .back {
      vertical-align:middle;
    }
    .center{
      display: flex;
      justify-content: space-between;
      padding:0 .4rem;
      span {
        flex: 1;
      }
      span.active {
        color: @color-high-text;
      }
    }
  }
</style>
